<template>
    <div class="mod-gridding">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.name" placeholder="网格名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">{{ $t('handle.search') }}</el-button>
                <el-button  type="primary" v-if="isAuth('ic:gridding:save')" @click="addOrUpdateHandle()">{{ $t('handle.add') }}</el-button>
                <el-button  type="danger"  v-if="isAuth('batch:delete')" @click="deleteHandle()"  :disabled="dataListSelections.length <= 0">{{ $t('handle.batchDelete') }}</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="dataList"
            border
            v-loading="dataListLoading"
            @selection-change="selectionChangeHandle"
            style="width: 100%;">
            <el-table-column
                type="selection"
                header-align="center"
                align="center"
                width="50">
            </el-table-column>
            <el-table-column
                v-if='show'
                prop="id"
                header-align="center"
                align="center"
                width="80"
                label="ID">
            </el-table-column>
            <el-table-column
                type="index"
               :label="$t('tabble.No')"
                width="50"
                :index="indexMethod">
            </el-table-column>
            <el-table-column
                prop="name"
                header-align="center"
                align="center"
                label="网格名称">
            </el-table-column>
            <el-table-column
                prop="communityCodeName"
                header-align="center"
                align="center"
                label="所属社区">
            </el-table-column>
            <el-table-column
                prop="neighborhoodCommitteeCodeName"
                header-align="center"
                align="center"
                label="所属居委会">
            </el-table-column>
            <el-table-column
                prop="manager"
                header-align="center"
                align="center"
                label="网格员">
            </el-table-column>
            <el-table-column
                prop="filterPhone"
                header-align="center"
                align="center"
                label="联系电话">
            </el-table-column>
            <el-table-column
                prop="delFlag"
                header-align="center"
                align="center"
                label="是否删除">
                <template slot-scope="scope">
            <el-tag
            :type="scope.row.delFlag == 1 ? 'success' : 'danger'"
            >{{delTypeFilter(scope.row.delFlag)}}</el-tag>
          <!-- <span>{{delTypeFilter(scope.row.delFlag)}}</span> -->
        </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                header-align="center"
                align="center"
                width="150"
                :label="$t('handle.handle')">
                <template slot-scope="scope">
                <el-button  type="text" v-if="isAuth('ic:gridding:update')" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('handle.update') }}</el-button>
                <el-button  type="text" v-if="isAuth('ic:gridding:delete')" size="small" @click="deleteHandle(scope.row.id)">{{ $t('handle.delete') }}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
</template>
<script>
import AddOrUpdate from './gridding-add-or-update'
export default {
    data(){
        return {
            show: false,
            dataForm: {
                name: ''
            },
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            dataListSelections: [],
            addOrUpdateVisible: false,
            delDicts: [],
            delDictType: {1: '未删除'}
        }
    },
    computed:{
         delTypeFilter () {
            return function (type) {
                    /** do something */
                    return this.delDictType[type]
                }
            }
    },
     // 引入的组件
    components: {
      AddOrUpdate
    },
    created() {
      this.$http({
        url: 'dg-ic/ic/dict/type/del_status',
        method: 'get'
        }).then(({data})=>{
            if(data && data.code === 0){
              this.delDicts = data.data;
              }
           })

    },
    activated(){
        this.getDataList()
    },
    methods: {
        getDataList(){
            this.dataListLoading = true
             this.$http({
                url: `/dg-ic/ic/gridding/list`,
                method: 'get',
                params: this.$http.adornParams({
                'page': this.pageIndex,
                'limit': this.pageSize,
                'name': this.dataForm.name,
                'housingId': sessionStorage.getItem("thiscommunityId")
                })
            }).then(({data})=>{
                if(data && data.code === 0){
                    this.dataList = data.data.list
                    this.totalPage = data.data.totalCount
                }else{
                    this.dataList = []
                    this.totalPage = 0
                }
                this.dataListLoading = false
            })
        },
        indexMethod(index){
            return index+1
        },
        // 每页数
        sizeChangeHandle(val){
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle(val){
            this.pageIndex = val
            this.getDataList()
        },
        // 多选
        selectionChangeHandle(val){
            this.dataListSelections = val
        },
         // 新增/修改
        addOrUpdateHandle(id){
            this.addOrUpdateVisible = true
            this.$nextTick(()=>{
                this.$refs.addOrUpdate.init(id)
            })
        },
        // 删除
        deleteHandle(id){
            var ids = id ? [id] : this.dataListSelections.map(item=>{
              return item.id
          })
          this.$confirm(`确定进行删除操作?`,'提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(()=>{
              this.$http({
                  url: `/dg-ic/ic/gridding/delete`,
                  method: 'delete',
                  data: this.$http.adornData(ids,false)
              }).then(({data})=>{
                if(data && data.code === 0){
                this.$message({
                    message: '删除成功',
                    type: 'success',
                    duration: 1500,
                    onClose: ()=>{
                    this.getDataList()
                    }
                })
            }else{
                this.$message.error(data.msg)
            }
            })
          })
        },
    }
}
</script>

